<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <style>
      table {
        width: 400px;
        border: 1px solid #000;
        border-collapse: collapse;
        margin: 0 auto;
      }

      td,
      th {
        border: 1px solid #000;
        text-align: center;
      }

      input {
        width: 50px;
      }

      .search {
        width: 600px;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div class="search">
      按照价格查询: <input type="text" class="start" /> -
      <input type="text" class="end" />
      <button class="search-price">搜索</button> 按照商品名称查询:
      <input type="text" class="product" />
      <button class="search-pro">查询</button>
    </div>

    <table></table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      var tbody = document.querySelector("table");
      var startInput = document.querySelector(".start");
      var endInput = document.querySelector(".end");
      var searchBtn = document.querySelector(".search-price");

      var productInput = document.querySelector(".product");
      var searchProBtn = document.querySelector(".search-pro");

      // ? 数据
      var data = [
        {
          id: 1,
          pname: "小米",
          price: 3999,
        },
        {
          id: 2,
          pname: "oppo",
          price: 999,
        },
        {
          id: 3,
          pname: "荣耀",
          price: 1299,
        },
        {
          id: 4,
          pname: "华为",
          price: 1999,
        },
      ];
      console.log();
      // ? 初始化
      renderData(data);

      // ? 渲染到页面上
      function renderData(data) {
        tbody.innerHTML = "";
        data.forEach(function (value) {
          var tr = document.createElement("tr");
          tr.innerHTML =
            "<td>" +
            value.id +
            "</td><td>" +
            value.pname +
            "</td><td>" +
            value.price +
            "</td>";
          tbody.appendChild(tr);
        });
      }

      // ? 按照价格查询
      searchBtn.onclick = function () {
        var start = startInput.value;
        var end = endInput.value;

        // ? 过滤
        var result = data.filter(function (item) {
          return item.price >= start && item.price <= end;
        });

        // ? 调用渲染
        renderData(result);
      };

      function searchByName() {
        var name = productInput.value;
        var result = data.filter(function (item) {
          return item.pname === name;
        });

        renderData(result);
      }

      // ? 按照商品名称查询
      searchProBtn.onclick = searchByName;

      // ? 回车查询
      // ? 防抖
      productInput.onkeyup = _.debounce(function (e) {
        if (e.keyCode === 13) {
          searchByName();
        }
      }, 500);
      //   实时匹配
      productInput.onkeyup = _.debounce(function () {
        var res = data.filter(function (ele) {
          if (ele.pname.includes(productInput.value)) {
            return ele.pname.includes(productInput.value);
          }
        });
        renderData(res);
      }, 500);
    </script>
  </body>
</html>
